<template>
  <div id="app" class="yarn-store">
    <!-- 头部导航 -->
    <van-nav-bar left-arrow title="细纱跟踪" @click-left="comeBack" left-text="返回">
      <template #right>
        <span @click="scanFn"><van-icon name="plus" size="20" /></span>
      </template>
    </van-nav-bar>

    <!-- 筛选 -->
    <van-search v-model="queryParam.keyLike" placeholder="请输入搜索关键词" @search="() => loadYarnDataFn(1)" />

    <!-- 滚动 -->
    <better-scroll class="body-scroll" :data="yarnData" :total-page="totalPage" :pulldown="true" :pullup="true" @pullup="loadNextPageFn" @pulldown="() => loadYarnDataFn(1)">
      <div class="data-card" v-show="yarnData.length > 0" v-for="yarn in yarnData" @click="openWin('yarn-info', {yarnId: yarn.id})">
        <div class="yarn-no">
          <span>{{ yarn.no }}</span>
        </div>
        <div class="yarn-detail" style="color: #1989fa">
          <span>颜色: {{ yarn.colorName }}</span>
          <span>支数: {{ yarn.standard }}</span>
        </div>
        <div class="yarn-detail" style="color: #e6a23c">
          <span>预计库存: {{ yarn.expectStock }}</span>
          <span>实际库存: {{ yarn.stock }}</span>
        </div>
        <div style="justify-content: space-between">
          <span>成份: {{ yarn.composition }}</span>
          <van-button size="mini" type="warning" @click.stop="openWin('yarn-info', {yarnId: yarn.id})">查看批次区域</van-button>
        </div>
      </div>
      <van-empty v-show="yarnData.length == 0" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" description="暂无数据" ></van-empty>
    </better-scroll>
  </div>
</template>

<script>
import {comeBack, openWin} from "@/utils";
import {getMacAddress} from "@/utils/auth";
import {loadYarnBatchData, loadYarnData} from "@/api/yarn";
import {SPLIT_COMMA} from "@/api/enum";

export default {
  name: "yarnStore",
  data() {
    return {
      /* 查询相关 */
      queryParam: {
        keyLike: "",
        pageNum: 1,
        pageSize: 6,
      },

      /* 列表相关 */
      yarnData: [],
      totalPage: 0,

      /* 详情弹窗 */
      showBatch: false,
      batches: []
    }
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    comeBack,
    openWin,

    /* 初始化 */
    initFn() {
      const that = this;
      /*window.api.addEventListener({
        name:'viewdisappear'
      }, function() {
        window.api.closeWin();
      });*/

      /* 加载纱线 */
      that.loadYarnDataFn(1);
    },

    /* 扫码 */
    scanFn() {

    },

    /* 加载纱线数据 */
    loadYarnDataFn(pageNum) {
      let that = this;
      if(pageNum == 1) {
        that.yarnData.splice(0, that.yarnData.length);
        that.queryParam.pageNum = pageNum;
      }
      loadYarnData(that.queryParam, res => {
        that.totalPage = res.totalPage;
        res.list.forEach(yarn => {
          //解析成份
          let composition = eval("(" + yarn.composition + ")");
          yarn.composition = composition.map(m => m.type + m.content).join(SPLIT_COMMA);
          yarn.standard = Number(yarn.standard) + "/" + yarn.strandNum;
          that.yarnData.push(yarn);
        });
      });
    },

    /* 加载下一页 */
    loadNextPageFn() {
      const that = this;
      that.queryParam.pageNum++;
      that.loadYarnDataFn();
    },
  }
}
</script>

<style lang="scss" scoped>
.yarn-store {
  ::v-deep .van-search {
    z-index: 1;
  }
  .body-scroll {
    height: 79vh;
    .data-card {
      width: 96vw;
      padding: 0.8rem;
      margin-left: 2vw;
      background-color: white;
      margin-top: 0.5rem;
      box-shadow: 0.3rem 0.5rem 0.3rem #888888;
      div {
        padding: 0.3rem 0rem;
        display: flex;
        line-height: 1rem;
      }
      .yarn-no {
        font-size: 1.2rem;
        font-weight: bolder;
      }
      .yarn-detail {
        display: flex;
        span {
          flex: 0 0 50%;
        }
      }
    }
  }
}
</style>